<template>
  <div>
    <Alert message="监听输入" :description="description" />
  </div>
</template>
<script lang="ts" setup>
import { watch, ref, inject } from "vue";
import { Alert } from "ant-design-vue";
import { deepClone } from 'epic-designer';

const formData = inject('formData');
const description = ref('等待用户输入');

// 旧数据
let oldValue = {}
watch(
 formData as Record<string, any>,
  (newValue) => {
    for (const key in newValue) {
      if (newValue[key] !== (oldValue as Record<string, any>)?.[key]) {
        description.value = `变化内容【${key}】: ${(oldValue as Record<string, any>)[key] ?? null} --> ${(newValue as Record<string, any>)[key] ?? null}`;
      }
    }

    // 更新旧数据
    oldValue = deepClone(newValue)
  },
  { deep: true }
);
</script>
